<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="<%=basePath%>"/>
    <title>${title }</title>
    <link href="themes/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("ul li img").click(function () {
                console.log("dianji")
                var status=$(this).attr("src")
                //改变为选中图片
                if(status==="/images/zy.jpg"){
                    $(this).attr("src", "/images/zyb.jpg")
                    //修改票数 总价 座位号
                    var info=getInfo()
                    var price=Number(${requestScope.film.price})
                    var zw=$(this).attr("alt")
                    var ind=$(this).attr("ind")
                    console.log(info.ps,info.zj,info.zw,info.seats)

                    info.ps+=1
                    info.zj+=price
                    if(info.zw===""){
                        info.zw =zw
                        info.seats=ind
                    }else{
                        info.zw +=","+zw
                        info.seats+=","+ind
                    }

                    console.log(info.ps,info.zj,info.zw,info.seats)

                    //修改dom值
                    $("#ps").attr("value",info.ps)
                    $("#zj").attr("value",info.zj)
                    $("#zw").attr("value",info.zw)
                    $("#seats").attr("value",info.seats)

                }else if (status==="/images/zyb.jpg"){
                    $(this).attr("src", "/images/zy.jpg")
                    //修改票数 总价 座位号
                    var info=getInfo()
                    var price=Number(${requestScope.film.price})
                    var zw=$(this).attr("alt")
                    var ind=$(this).attr("ind")
                    console.log(info.ps,info.zj,info.zw,info.seats)

                    info.ps-=1
                    info.zj-=price
                    info.zw = (","+info.zw).replace(","+zw, "")
                    info.seats =(","+info.seats).replace(","+ind, "")

                    console.log(info.ps,info.zj,info.zw,info.seats)

                    //修改dom值
                    $("#ps").attr("value",info.ps)
                    $("#zj").attr("value",info.zj)
                    $("#zw").attr("value",info.zw.substr(1))
                    $("#seats").attr("value",info.seats.substr(1))
                }
            })
        })
//获取现有值
        function getInfo() {
            var info={}
            info.ps=Number($("#ps").attr("value"))
            info.zw=$("#zw").attr("value")
            info.seats=$("#seats").attr("value")
            info.zj=Number($("#zj").attr("value"))
            return info
        }
    </script>
</head>

<body>
<jsp:include page="header.jsp"></jsp:include>
<div class="block box">
    <div class="blank"></div>
    <div id="ur_here">
        当前位置: <a href=".">首页</a>
        <code> &gt; </code>
        <a href="index/all.action">电影选座</a>
        <code> &gt; </code>
        <a href="index/cate.action?id=${film.cateid }">${film.catename }</a>
        <code> &gt; </code>
        ${film.filmname }
    </div>
</div>
<div class="blank"></div>
<div class="block clearfix">

    <div class="">
        <div id="goodsInfo" class="clearfix">
            <div class="imgInfo">
                <img src="${film.image}" alt="${film.filmname }" width="320px;" height="320px"/>
                <div class="blank5"></div>
                <div class="blank"></div>
            </div>
            <div style="float:left;width: 400px;padding-top: 30px" align="center">
                <div align="center">
                    <ul style="display: inline">
                        <c:forEach items="${seats}" var="s">
                            <c:if test="${s.seatrow=='3排'}">
                                <c:choose>
                                    <c:when test="${s.ifvalid==0}">
                                        <li style="display: inline">
                                            <img src="/images/zy.jpg" style="width: 30px;height: 30px" ind="${s.seatindex}"
                                                 alt="${s.seatrow}${s.seatcol}" class=""/>
                                        </li>
                                    </c:when>
                                    <c:when test="${s.ifvalid==1}">
                                        <li style="display: inline">
                                            <img src="/images/zya.jpg" style="width: 30px;height: 30px" ind="${s.seatindex}"
                                                 alt="${s.seatrow}${s.seatcol}" class=""/>
                                        </li>
                                    </c:when>
                                </c:choose>
                            </c:if>
                        </c:forEach>
                    </ul>
                    <div class="blank"></div>
                    <ul>
                        <c:forEach items="${seats}" var="s">
                            <c:if test="${s.seatrow=='2排'}">
                                <c:choose>
                                    <c:when test="${s.ifvalid==0}">
                                        <li style="display: inline">
                                            <img src="/images/zy.jpg" style="width: 30px;height: 30px" ind="${s.seatindex}"
                                                 alt="${s.seatrow}${s.seatcol}" class=""/>
                                        </li>
                                    </c:when>
                                    <c:when test="${s.ifvalid==1}">
                                        <li style="display: inline">
                                            <img src="/images/zya.jpg" style="width: 30px;height: 30px" ind="${s.seatindex}"
                                                 alt="${s.seatrow}${s.seatcol}" class=""/>
                                        </li>
                                    </c:when>
                                </c:choose>
                            </c:if>
                        </c:forEach>
                    </ul>
                    <div class="blank"></div>
                    <ul>
                        <c:forEach items="${seats}" var="s">
                            <c:if test="${s.seatrow=='1排'}">
                                <c:choose>
                                    <c:when test="${s.ifvalid==0}">
                                        <li style="display: inline">
                                            <img src="/images/zy.jpg" style="width: 30px;height: 30px" ind="${s.seatindex}"
                                                 alt="${s.seatrow}${s.seatcol}" class=""/>
                                        </li>
                                    </c:when>
                                    <c:when test="${s.ifvalid==1}">
                                        <li style="display: inline">
                                            <img src="/images/zya.jpg" style="width: 30px;height: 30px" ind="${s.seatindex}"
                                                 alt="${s.seatrow}${s.seatcol}" class=""/>
                                        </li>
                                    </c:when>
                                </c:choose>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
                <div class="blank"></div>
                <div style="padding-top: 30px" align="bottom">
                    <ul>
                        <li><label style="float: top">屏幕</label></li>
                        <li><img src="/images/pm.jpg" style="width: 200px;height: 30px" alt="pm"/></li>
                    </ul>
                </div>
            </div>
                <div class="textInfo" style="width: 300px;float: right">
                    <form action="index/addcart.action" method="post" name="ECS_FORMBUY" id="ECS_FORMBUY">
                        <h1 class="clearfix">${film.filmname }</h1>
                        <ul class="ul2 clearfix">
                            <li class="clearfix" style="width: 100%">
                                <dd>
                                    <strong>价格：</strong><font class="shop" id="ECS_SHOPPRICE">￥${film.price }元</font>
                                </dd>
                            </li>
                            <li class="clearfix" style="width: 100%">
                                <dd>
                                    <strong>电影类型：</strong><a
                                        href="index/cate.action?id=${film.cateid }">${film.catename }</a>
                                </dd>
                            </li>
                            <li class="clearfix" style="width: 100%">
                                <dd>
                                    <strong>影院：</strong>${round.hall.cinema.cinemaname}
                                </dd>
                            </li>
                            <li class="clearfix" style="width: 100%">
                                <dd>
                                    <strong>影厅：</strong>${round.hall.hallname}
                                    <input type="text" hidden="true"  name="hallid" value="${round.hall.hallid}"/>
                                </dd>
                            </li>
                            <li class="clearfix" style="width: 100%">
                                <dd>
                                    <strong>场次：</strong>
                                    <fmt:formatDate value="${round.ownday}" pattern="yyyy-MM-dd"/> &nbsp;&nbsp;
                                    ${round.start}--${round.end}
                                    <input type="text" hidden="true"   name="roundid" value="${round.roundid}"/>
                                </dd>
                            </li>
                            <li class="clearfix" style="width: 100%">
                                <dd>
                                    <strong style="float: top">座位：</strong>
                                    <textarea id="zw" name="" value="" style="border:0;outline:0;width:200px" rows="3" cols="3"></textarea>
                                    <input type="text"  hidden="true" id="seats" name="seats" value=""/>
                                </dd>
                            </li>
                            <li class="clearfix" style="width: 100%">
                                <dd>
                                    <strong>票数：</strong>
                                    <input id="ps" name="num" value="" style="border:0;outline:0;" rows="3" ></input>
                                </dd>
                            </li>
                            <li class="clearfix" style="width: 100%">
                                <dd>
                                    <strong>总价：</strong>
                                    <input id="zj" name="zj" value="" style="border:0;outline:0;" rows="3" ></input>
                                </dd>
                            </li>
                        </ul>
                        <%--<ul class="bnt_ul">
                            <li class="clearfix">
                                <dd>
                                    <strong>购买数量：</strong>
                                    <input name="num" type="text" id="number" value="1" size="4"
                                           style="border: 1px solid #ccc;"/>
                                    <input type="hidden" name="goodsid" value="${film.filmid }"/>
                                    <input type="hidden" name="price" value="${film.price }"/>
                                </dd>
                            </li>
                            <li class="padd"><input type="image" src="themes/xecmoban_haier2015/images/goumai2.png"/></li>
                        </ul>--%>
                        <div style="margin-top: 5px">
                            <input type="text" hidden="true"  name="filmid" value="${film.filmid}"/>
                            <input type="text" hidden="true"  name="price" value="${film.price}"/>
                            <input type="text" hidden="true"  name="userid" value="${user.userid}"/>
                            <input type="submit" value="结算" class="f_r bnt_blue_2"/>
                        </div>
                    </form>
                </div>

        </div>
    </div>
</div>
<jsp:include page="footer.jsp"></jsp:include>

</body>
</html>
